import lessModule from "./index.module.less"
import logoImage from "../../../../../../assets/image/homePage-headerMenu-checkPassword.png"
import { Button, Form } from "antd"
import FormItemPasswordInputComponent from "../../../../../../component/formItemPasswordInput"
import { useForm } from "antd/es/form/Form"
import { Fragment, useEffect } from "react"
import { $Http } from "../../../../../../network"
import { message } from "antd/lib"
import { useNavigate } from "react-router-dom"

// 主页-头部菜单组件-修改密码弹窗组件
interface homePageHeaderMenuComponentCheckPasswordModalComponentComponentInterface {
    change_cancel: Function
}
const HomePage_HeaderMenuComponent_CheckPasswordModalComponent: React.FC<homePageHeaderMenuComponentCheckPasswordModalComponentComponentInterface> = (props) => {
    const [form] = useForm()
const navigate = useNavigate()
    const initialValuesData = {
        password: sessionStorage.userPassword,
        newPassword: "",
        repeatNewPassword: ""
    }

    const passwordInputList = [
        {
            name: "password",
            placeholder: "请输入原密码！",
        },
        {
            name: "newPassword",
            placeholder: "请输入新密码！",
        },
        {
            name: "confirmPassword",
            placeholder: "请再次输入新密码！",
            specialRule: [
                ({ getFieldValue }: any) => ({
                    validator(_: any, value: string) {
                        if (!value || (value && getFieldValue('newPassword') === value)) {
                            return Promise.resolve();
                        }
                        return Promise.reject(new Error("请与新密码一致！"));
                    },
                }),
            ]
        },
    ]

    const click_confirm = () => {
        form.validateFields().then((res) => {
            $Http("editPassword", { id: sessionStorage.userID, password: res["password"], newPassword: res["newPassword"] }).then((res) => {
                props.change_cancel()
                navigate("login")
                message.success(res["success"])

            })
        })
    }

    return (
        <div className={lessModule["homePageHeaderMenuComponentCheckPasswordModalComponent"]}>
            <header className={lessModule["homePageHeaderMenuComponentCheckPasswordModalComponent-header"]}>
                <div className={lessModule["homePageHeaderMenuComponentCheckPasswordModalComponent-header__title"]}>
                    <span>修改密码</span>
                    <span className={lessModule["header-title__user"]}>
                        <span>当前用户：</span>
                        <span>{sessionStorage.username}</span>
                    </span>
                </div>
                <img src={logoImage} />
            </header>
            <main className={lessModule["homePageHeaderMenuComponentCheckPasswordModalComponent-main"]}>
                <Form
                    className={lessModule["homePageHeaderMenuComponentCheckPasswordModalComponent-main__form"]}
                    form={form}
                    initialValues={initialValuesData}
                >
                    {
                        passwordInputList.map((item, idx) => {
                            return (
                                <Fragment key={`passwordInputItem${idx}`}>

                                    <FormItemPasswordInputComponent name={item["name"]} specialRule={item["specialRule"]} placeholder={item["placeholder"]} />

                                </Fragment>
                            )
                        })
                    }

                </Form>
            </main>
            <footer className={lessModule["homePageHeaderMenuComponentCheckPasswordModalComponent-footer"]}>
                <Button className={lessModule["homePageHeaderMenuComponentCheckPasswordModalComponent-footer__btn"]} type="primary" onClick={click_confirm}>确认修改</Button>
                <Button className={lessModule["homePageHeaderMenuComponentCheckPasswordModalComponent-footer__btn"]} type="primary" danger onClick={() => props.change_cancel()}>取消</Button>
            </footer>
        </div>
    )
}


export default HomePage_HeaderMenuComponent_CheckPasswordModalComponent